<template>
  <div class="discover-header">
    <div class="header-content">
      <h1 class="header-title">家庭服务</h1>
      <div class="header-actions">
        <div class="header-icon" @click="openDiscoverPhoto">
          <img src="@/assets/imgs/discover_photo.png" alt="发现" class="discover-icon" />
        </div>
        <div class="share-icon" @click="handleShare">
          <img src="@/assets/imgs/share.png" alt="分享" class="share-icon-img" />
        </div>
      </div>
    </div>
    
    <!-- 分享模态框 -->
    <ShareModal 
      :visible="showShareModal" 
      @close="handleCloseShareModal"
      @submit="handleShareSubmit"
    />
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import ShareModal from './ShareModal.vue'

// 分享模态框状态
const showShareModal = ref(false)

// 注入刷新方法
const refreshPostList = inject('refreshPostList', null)

const openDiscoverPhoto = () => {
  ElMessage.info('发现功能开发中...')
}

const handleShare = () => {
  console.log('点击分享按钮，打开分享模态框')
  showShareModal.value = true
  console.log('showShareModal.value:', showShareModal.value)
}

const handleCloseShareModal = () => {
  showShareModal.value = false
}

const handleShareSubmit = (shareData) => {
  console.log('分享提交成功:', shareData)
  ElMessage.success('分享发布成功！')
  showShareModal.value = false
  
  // 刷新帖子列表
  if (refreshPostList) {
    refreshPostList()
  }
}
</script>

<style scoped>
.discover-header {
  padding: 12px 16px;
  background-color: transparent;
  position: relative;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 50%;
}

.header-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.discover-icon {
  width: 20px;
  height: 20px;
}

.share-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 50%;
}

.share-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.share-icon-img {
  width: 20px;
  height: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .discover-header {
    padding: 8px 12px;
  }
  
  .header-title {
    font-size: 16px;
  }
  
  .header-actions {
    gap: 8px;
  }
  
  .header-icon,
  .share-icon {
    width: 32px;
    height: 32px;
  }
  
  .discover-icon,
  .share-icon-img {
    width: 18px;
    height: 18px;
  }
}
</style>
